<template>
    <div>
        <div  class="d1">
<van-image
  round
  width="100"
  height="100"
  fit="cover"
  src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/baike/s=500/sign=6403465731c79f3d8be1e4308aa0cdbc/c995d143ad4bd113deceb49a50afa40f4bfb0512.jpg"
/>  <div v-if="$store.state.islogin"  class="d2" @click="grx">{{$store.state.account}}</div>
    <div v-else class="d2" @click="log">点击登录</div>
    
    
    </div>
    <van-cell title="购物车" is-link @click="goshop"  />
    <van-cell title="toast" is-link @click="toast"/>
      <van-tabbar v-model="active" fixed placeholder>
    <van-tabbar-item to="/" name="home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item to="/fl?id=0" name="find" icon="search" dot>分类</van-tabbar-item>
    <van-tabbar-item to="/com" name="com" icon="friends-o" badge="5">社区</van-tabbar-item>
    <van-tabbar-item name="me" icon="manager-o">个人中心</van-tabbar-item>
  </van-tabbar>
    </div>
</template>

<style scoped>


span{color: black;}
    .d1{
        height: 2rem;
        width: 100%;
        background-color: #1b2838;
        
        
        text-align: center;
        padding: 1.5rem 0;
    }
    .d2{
        font-size: 0.4rem;
        color: white;
    }
/deep/ .van-tabbar{
  background-color: rgb(23, 26, 33);
}
.van-tabbar-item--active{
    background-color: rgb(23, 26, 33);
}
</style>
<script>
export default {
    data() {
        return {
            active:'me'
        }
    },
    methods:{
        toast(){
  this.$toast({
                message: '成功',
                position: 'bottom',
                duration: 3000
              })
        },
        goshop(){
            if(this.$store.state.islogin==true){
                this.$router.push('/goshop')  
           
            }else{
                this.$router.push('/log')
            }
        },
 
    log(){
         this.$router.push('/log')
    },
        grx(){
    this.$router.push('/mydetail')
    }
    }

}
</script>